<template>
    <el-dialog title="添加企业成员" :visible.sync="showAddMember" width="55%" :before-close="handleClose" :close-on-click-modal="false">
        <div class="madp-labelbox">
            <el-tag v-for="tag in tags" :key="tag.name" closable style="margin: 5px" @close="labelClose(tag)">{{ tag.employeeName }}</el-tag>
        </div>
        <div class="madp-imgbox-top">
            <div class="madp-department">
                <div class="madp-add-member-content">
                    <el-row>
                        <el-col :span="12" class="madp-content-left">
                            <div>
                                <el-input v-model.trim="searchText" maxlength="20" show-word-limit @keyup.enter.native="searchConfirm">
                                    <i slot="suffix" @click="searchConfirm" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </div>
                            <div style="margin-top: 10px">
                                <el-tree :data="treeData" show-checkbox node-key="id" ref="treeForm" check-strictly highlight-current @check-change="handleCheckChange" :props="treeProps"></el-tree>
                            </div>
                        </el-col>
                        <el-col :span="12" class="madp-content-right">
                            <div style="line-height: 36px">已选择成员</div>
                            <div>
                                <el-table
                                    :class="onlyOne ? 'hideall' : ''"
                                    v-loading="loading"
                                    max-height="250"
                                    ref="multipleTable"
                                    :data="tableData"
                                    tooltip-effect="dark"
                                    style="width: 100%"
                                    :row-key="employeeId"
                                    @select="handleRow"
                                    @select-all="handleAll"
                                >
                                    <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
                                    <el-table-column v-if="onlyOne" label="选择">
                                        <template slot-scope="scope">
                                            {{ scope.row.employeeName }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-else label="全选">
                                        <template slot-scope="scope">
                                            {{ scope.row.employeeName }}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button @click="confirm" type="primary">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { getDepartmentList2, memberByDepartmentList } from '@/api/common-interface/department';
export default {
    name: 'Department',
    data() {
        return {
            searchText: '',
            loading: false,
            tags: [],
            checkedId: '',
            treeData: [],
            treeProps: {
                children: 'children',
                label: 'label'
            },
            tableData: []
        };
    },
    props: {
        // dialog显示、隐藏
        showAddMember: {
            type: Boolean,
            default: false
        },
        /*是否多选*/
        onlyOne: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        selectedMembers: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        checkedId(newVal, olaVal) {
            this.getDepartmentMember(newVal);
        }
    },
    mounted() {
        this.tags = JSON.parse(JSON.stringify(this.selectedMembers));
        this.getDepartment();
    },
    methods: {
        searchConfirm() {
            this.getDepartment(this.searchText);
            // searchKeyWords
            // this.searchText
        },
        employeeId(row) {
            return row.employeeId;
        },
        handleRow(selection, row) {
            if (this.onlyOne) {
                // 先清除所有选中的
                this.$refs.multipleTable.clearSelection();
                // 当前的点击实现勾选
                this.$refs.multipleTable.toggleRowSelection(row);
                // const arr = []
                this.tags = [];
                this.tags.push(row);
                // this.getTableList(row);
            } else {
                let index = this.tags.findIndex((item) => item.employeeId === row.employeeId);
                if (index > -1) {
                    this.tags.splice(index, 1);
                } else {
                    this.tags.push(row);
                }
                // this.tags = selection
            }
        },
        handleAll(selection) {
            this.tags = JSON.parse(JSON.stringify(selection));
        },
        //根据部门 获取人员列表
        getDepartmentMember(id) {
            this.loading = true;
            memberByDepartmentList({ departmentIds: id })
                .then((res) => {
                    this.tableData = res.data.data;
                    this.loading = false;
                    this.$nextTick(() => {
                        if (this.$refs.multipleTable) {
                            this.$refs.multipleTable.clearSelection();
                        }
                        this.tableData.forEach((row) => {
                            for (let j in this.tags) {
                                if (row.employeeId === this.tags[j].employeeId) {
                                    this.$refs.multipleTable.toggleRowSelection(row, true);
                                    break;
                                }
                            }
                        });
                    });
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        labelClose(tag) {
            this.$refs.multipleTable.toggleRowSelection(tag, false);
            let index = this.tags.findIndex((item) => item.employeeId === tag.employeeId);
            if (index > -1) {
                this.tags.splice(index, 1);
            }
        },
        //获取部门机构树
        getDepartment(search) {
            function getTree(ary) {
                return ary.map((v) => {
                    const item = {
                        id: v.id,
                        label: v.name
                    };
                    if (v.son.length > 0) item.children = getTree(v.son);
                    return item;
                });
            }
            getDepartmentList2({ searchKeyWords: search } || '').then((res) => {
                this.treeData = getTree(res.data.data.department);
            });
        },
        handleClose() {
            this.tags = JSON.parse(JSON.stringify(this.selectedMembers));
            this.$emit('closepop');
        },
        handleCheckChange(data, checked) {
            if (checked === true) {
                this.checkedId = data.id;
                this.$refs.treeForm.setCheckedKeys([data.id]);
            } else {
                if (this.checkedId == data.id) {
                    this.$refs.treeForm.setCheckedKeys([data.id]);
                }
            }
        },
        confirm() {
            this.$emit('getMemberList', this.tags);
            this.$emit('closepop');
        }
    }
};
</script>

<style scoped lang="scss">
// /deep/ .el-table__header-wrapper  .el-checkbox{
//             //找到表头那一行，然后把里面的复选框隐藏掉
//             display:none
//         }
.hideall /deep/ thead {
    .el-table-column--selection {
        .cell {
            display: none;
        }
    }
}

.madp-selectall {
    background: palevioletred;
}
.madp-labelbox {
    max-height: 160px;
    overflow: auto;
    margin: 0 10px 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.madp-department {
    .madp-add-member-content {
        .madp-content-left {
            min-height: 200px;
            padding: 0 5px;
            // border-right: 1px solid #dddddd;
        }

        .madp-content-right {
            min-height: 200px;
            padding: 0 5px;
            border-left: 2px solid #dddddd;
            .madp-content-right-list {
                display: flex;
                /*justify-content: space-around;*/
                align-items: center;
                padding-left: 30px;

                .madp-list-name {
                    flex: 1;
                }
            }
        }
    }
}
</style>
